{% extends "tracking/tracking_base.html" %}
{% block title %}申请详情{% endblock %}
{% block page_content %}
    <h1 class="page-header">申请详情</h1>
    <div class="col-md-12">
        <div style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;">申请信息</div>
        <div class="col-md-8">
            <div style="margin-top:10px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>ID</center>
                </div>
                <div class="col-md-5" style="font-size:20px;">{{ data.number }}</div>
            </div>
        </div>
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>{{ '车辆详情' if app_type=='buy' else '产品详情' }}</center>
                </div>
                <div class="col-md-5"
                     style="font-size:20px;">{{ data.car_title|safe if data.car_title else data.product }}</div>
            </div>
        </div>
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>提交时间</center>
                </div>
                <div class="col-md-5"
                     style="font-size:20px;">{{ data.submission_date.strftime("%Y-%m-%d %H:%M:%S") }}</div>
            </div>
        </div>
        {% if request.args.get('app_type', '') == 'buy' %}
            {% if not data.outside %}
                <div class="col-md-8">
                    <div style="margin-top:15px;">
                        <div class="col-md-2" style="font-size:20px;">
                            <center>购车方案</center>
                        </div>
                        <div class="col-md-5" style="font-size:20px;">{{ data.buy_plan }}</div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>申请人</center>
                </div>
                <div class="col-md-5" style="font-size:20px;">{{ data.name }}</div>
            </div>
        </div>
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>申请电话</center>
                </div>
                <div class="col-md-5" style="font-size:20px;">{{ data.phone }}</div>
            </div>
        </div>
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>地区</center>
                </div>
                <div class="col-md-5" style="font-size:20px;">{{ data.area }}</div>
            </div>
        </div>
        <div class="col-md-8">
            <div style="margin-top:15px;">
                <div class="col-md-2" style="font-size:20px;">
                    <center>申请备注</center>
                </div>
                <div class="col-md-5" style="font-size:20px;">{{ data.mark if data.mark else '无' }}</div>
            </div>
        </div>
        {% if data.state in [1, 2] %}
            <div class='col-md-8' style="margin-top:25px;">
                <button type="button" class="btn btn-success" data-target="#OfflineModal" data-toggle="modal">线下跟进
                </button>
                <button type="button" class="btn btn-danger" data-target="#AbandonModal" data-toggle="modal">废弃申请
                </button>
            </div>
        {% endif %}
        <div class='col-md-12'
             style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;margin-top:20px;">跟进记录
            {% if data.state in [1, 2] %}
                <button type="button" class="btn btn-success" style="float:right;margin-top:3px;"
                        data-target="#AddModal" data-toggle="modal">添加记录
                </button>
            {% endif %}
        </div>
        <div class="col-md-12 panel-group" style="margin-top:15px">
            {% for item in records %}
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
                         href="#collapse{{ records.index(item)+1 }}">
                        <h4 class="panel-title">
                            跟进时间：{{ item.time.strftime("%Y-%m-%d %H:%M:%S") }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp跟进人：{{ item.tracker_name }}
                        </h4>
                    </div>
                    <div id="collapse{{ records.index(item)+1 }}" class="panel-collapse collapse in">
                        <div class="panel-body">
                            {{ item.content }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="modal fade" id="OfflineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">线下跟进</h4>
                    </div>
                    <div class="modal-body">
                        <center>确定将该申请置为线下跟进状态吗？</center>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger"
                                onclick="offline('{{ data.number }}', '{{ app_type }}')">确定
                        </button>
                        <button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消
                        </button>
                    </div>
                </div>
            </div><!-- /.modal-dialog -->
        </div>
        <div class="modal fade" id="AbandonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">废弃申请</h4>
                    </div>
                    <div class="modal-body">
                        <center>确定废弃该申请吗？</center>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger"
                                onclick="abandon('{{ data.number }}', '{{ app_type }}')">确定
                        </button>
                        <button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消
                        </button>
                    </div>
                </div>
            </div><!-- /.modal-dialog -->
        </div>
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">添加跟进记录</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form" id="AddForm">
                            <label for="content">跟进内容</label>
                            <textarea class="form-control" id="content" name="content" cols=20 rows=5
                                      required></textarea>
                            <input type='hidden' name='app_number' id='app_number' value='{{ data.number }}'>
                            <input type='hidden' name='app_type' id='app_type' value='{{ app_type }}'>
                            <button type="button" style="margin-top:8px;" class="btn btn-default"
                                    onclick="add_submit()">保存
                            </button>
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-dialog -->
        </div>
    </div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
        var state = -1;

        var offline = function (app_number, app_type) {
            $.ajax({
                url: "/tracking/track/offline/",
                type: "POST",
                data: {'app_number': app_number, 'app_type': app_type},
                dataType: "text",
                success: function (data) {

                    json = eval("(" + data + ")");
                    state = json.state;
                    $('#OfflineModal').modal('hide');
                    if (json.state === 0) {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
                        $("#msg").html("操作成功！");
                    }
                    else {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                        $('#msg').html("操作失败，" + json.msg);
                    }
                    $('#MsgModal').modal();
                },
                error: function (xhr, error) {
                    state = -1;
                    $('#msg_icon').removeAttr('class');
                    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                    $('#msg').html("操作失败，服务器发生错误");
                }
            });
            $('#MsgModal').modal();
            return;
        };

        var abandon = function (app_number, app_type) {
            $.ajax({
                url: "/tracking/track/abandon/",
                type: "POST",
                data: {'app_number': app_number, 'app_type': app_type},
                dataType: "text",
                success: function (data) {

                    json = eval("(" + data + ")");
                    state = json.state;
                    $('#AbandonModal').modal('hide');
                    if (json.state === 0) {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
                        $("#msg").html("操作成功！");
                    }
                    else {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                        $('#msg').html("操作失败，" + json.msg);
                    }
                },
                error: function (xhr, error) {
                    state = -1;
                    $('#msg_icon').removeAttr('class');
                    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                    $('#msg').html("操作失败，服务器发生错误");
                }
            });
            $('#MsgModal').modal();
            return;
        };

        var add_submit = function () {

            var content = $('#content').val();
            if (content === "") {
                $('#msg_icon').removeAttr('class');
                $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                $('#msg').html("请填写跟进内容");
                state = -1;
                $('#MsgModal').modal();
                return
            }

            $.ajax({
                url: "/tracking/track/add_tracking/",
                type: "POST",
                data: $("#AddForm").serialize(),
                dataType: "text",
                success: function (data) {

                    json = eval("(" + data + ")");
                    state = json.state;
                    $('#AddModal').modal('hide');
                    if (json.state === 0) {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
                        $("#msg").html("添加成功！");
                        $('#content').val('');
                    }
                    else {
                        $('#msg_icon').removeAttr('class');
                        $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                        $('#msg').html("添加失败，" + json.msg);
                    }
                },
                error: function (xhr, error) {
                    state = -1;
                    $('#msg_icon').removeAttr('class');
                    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
                    $('#msg').html("添加失败，服务器发生错误");
                }
            });
            $('#MsgModal').modal();
            return;
        };

        $(document).ready(function () {
            $('#MsgModal').on('hidden.bs.modal', function () {
                if (state === 0) {
                    window.location.reload();
                }
            });
        });

    </script>
    <script>
        nav = document.getElementById("nav_track");
        nav.setAttribute("class", "active");
    </script>
{% endblock %}
